<template>
  <div class="coursework-div">

          <el-table
            :data="workInfos"
            style="width: 100%">
            <el-table-column
                prop="workName"
                label="作业名"
                width="180">
            </el-table-column>
            <el-table-column
                label="作业类型"
                width="180">
                <template slot-scope="scope">
                    <el-tag type="warning" effect="plain">
                    当前问题为{{scope.row.workType == 1?
                    '文本题':scope.row.isMuitlSelect?'多项选择题':'单项选择题'}}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column
                prop="submitCount"
                width="80"
                label="提交人数">
            </el-table-column>

            <el-table-column
                prop="endTime"
                label="结束日期">
            </el-table-column>

            <el-table-column
                width="100"
                label="是否结束">
                <template slot-scope="scope">
                    <el-tag effect="plain" :type="scope.row.end == 1?'danger':'success'">
                        {{scope.row.end == 1?'已结束':'未结束'}}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" 
                    v-if="scope.row.workType == 2"
                    content="选择题会自动计算分数" placement="top">
                        <el-button 
                        plain size="small" round 
                        @click="correctingWork(scope.row.workId, scope.row.workType, scope.row.end, scope.row)">批改作业</el-button>
                    </el-tooltip>
                    <el-button v-if="scope.row.workType == 1"
                        plain size="small" round 
                        @click="correctingWork(scope.row.workId, scope.row.workType, scope.row.end, scope.row)">批改作业</el-button>
                    
                    <el-button plain size="small" round @click="updateTheWokrInfo(scope.row.workId)">修改</el-button>
                </template>
            </el-table-column>

            </el-table>
  </div>
</template>

<script>
import * as WORKAPI from '../../api/work/index'

export default {
    props:['courseId'],
    data() {
        return {
            workInfos: []
        }
    },
    methods: {
        correctingWork(workId,workType,end, workInfo) {

            if(end == 1) {
                this.$message.error('不能进入已结束的作业，您可以在修改作业里修改结束时间。')
                return
            }
            if(workType == 2) return
            this.$router.push(
                {
                    name:"CourseCorrectingWork",
                    params:{
                        workInfo: workInfo
                    }
                }
            )
        },
        updateTheWokrInfo(workId) {
            this.$router.push(
                {name:'WorkUpdate', params:{workId}}
            ) 
        },
        getCurCourseWork() {
            WORKAPI.getWorkInTheCourseId(this.courseId).then(res => {
                this.workInfos = res.data.works
            })
        }
    },
    mounted() {
        this.getCurCourseWork()
    }
}
</script>

<style>
.coursework-div {
    margin: 2%;
    width: 96%;
}

</style>